<template>
    <view class="container" :class="{ paddingBottomBar: isShowBottomBar }" :style="themeColor">
        <view class="order-item-main" v-for="item in listData">
            <view class="pro-top-img">
                <image
                    mode="aspectFit"
                    v-if="!getAppSet().isHideImg"
                    :src="item.ProductImage ? easyGetImgUrl(item.ProductImage) : '/static/img/no-img.jpg'"></image>
                <text>{{ item.ProductName }}</text>
            </view>
            <view class="pro-spec" v-for="subitem in item.SubItems">
                <view>
                    <view>
                        <view v-if="subitem.Attribute"
                            ><text class="pro-label">规格：</text><text>{{ subitem.Attribute }}</text></view
                        >
                        <view v-else
                            ><text class="pro-label">单价：</text
                            ><text
                                >￥{{ subitem.OrgPrice }}/{{
                                    subitem.UnitName ? subitem.UnitName : subitem.RationUnit
                                }}</text
                            ></view
                        >
                    </view>
                    <view
                        ><text class="pro-total"
                            >￥<text class="pro-big">{{ subitem.Total }}</text></text
                        ></view
                    >
                </view>
                <view>
                    <view
                        ><view v-if="subitem.Attribute"
                            ><text class="pro-label">单价：</text
                            ><text
                                >￥{{ subitem.OrgPrice }}/{{
                                    subitem.UnitName ? subitem.UnitName : subitem.RationUnit
                                }}</text
                            ></view
                        ></view
                    >
                    <view
                        ><text class="pro-label">x{{ subitem.Number }}</text></view
                    >
                </view>
            </view>
        </view>
        <view class="bottom-bar" v-if="isShowBottomBar">
            <text>{{ data.length }}种{{ getTemporaryTotalNum() }}件</text>
            <view>
                <text
                    >金额：<text class="price">{{ getTotalPrice() }}</text
                    >元</text
                >
                <button class="btn btn-success" @click="nextStep">下一步</button>
            </view>
        </view>
    </view>
</template>

<script>
import utilsOld from "@/utils/utilsOld.js"
import { GetRefundOrderActionList, GetRefundOrderTempList, RefundOrderActionSubmit } from "@/service/api/exChange.js"
export default {
    components: {},
    data() {
        return {
            id: 0,
            next: "",
            data: [],
            listData: {},
            isShowBottomBar: false,
            otherData: {},
        }
    },
    onLoad(e) {
        this.id = e.id
        this.next = e.next
        if (this.next) {
            this.isShowBottomBar = true
        }
    },
    mounted() {
        if (this.id) {
            this.yesOrderList() //有单退货暂存列表
        } else {
            this.noOrderList() //无单退货暂存列表
        }
    },
    methods: {
        yesOrderList() {
            GetRefundOrderActionList({ orderId: this.id }).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data
                    if (res && res.Data && res.Data.length > 0) {
                        this._dataformat(res.Data)
                    }
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "none",
                        duration: 2000,
                    })
                }
            })
        },
        noOrderList() {
            GetRefundOrderTempList().then((res) => {
                if (res.State == 1) {
                    this.data = res.Data
                    if (res && res.Data && res.Data.length > 0) {
                        this._dataformat(res.Data)
                    }
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "none",
                        duration: 2000,
                    })
                }
            })
        },
        _dataformat(data) {
            let items = []
            data.forEach((e) => {
                let filterItem = items.filter((item) => {
                    return item.ProductId == e.ProductId
                })
                if (filterItem.length < 1) {
                    let SubItems = []
                    SubItems.push(e)
                    let obj = {
                        ProductId: e.ProductId,
                        ProductName: e.ProductName,
                        ProductImage: e.ProductImage,
                        Attribute: e.Attribute,
                        SubItems: SubItems,
                    }
                    items.push(obj)
                } else {
                    filterItem[0].SubItems.push(e)
                }
            })
            items.forEach((e) => {
                e.SubItems.forEach((item) => {
                    item.Total = utilsOld.mul(item.OrgPrice, item.Number)
                })
            })
            this.listData = items
        },
        getTemporaryTotalNum() {
            let num = 0
            this.data.forEach((e) => {
                num += e.Number
            })
            return num
        },
        getTotalPrice() {
            let num = 0
            this.data.forEach((e) => {
                num = utilsOld.add(num, utilsOld.mul(e.Number, e.OrgPrice))
            })
            return num
        },
        nextStep() {
            this.easyGoTo("/pages_shop/packet/return/billDetail")
        },
    },
}
</script>

<style lang="scss" scoped>
.container.paddingBottomBar {
    padding-bottom: 130rpx;
}
.container {
    padding: $app-page-padding;

    .order-item-main {
        padding: $app-page-padding;
        background: #ffffff;
        margin-bottom: 20rpx;
        .pro-top-img {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20rpx;
            image {
                width: 120rpx;
                height: 120rpx;
                border-radius: 4rpx;
                // border: 1px solid #2CD334;
                margin-right: 20rpx;
            }
            text {
                font-size: $font-size-26;
                flex: 1;
            }
        }
        .pro-spec {
            // background: #f7f7f7;
            padding: 10rpx 0rpx;
            display: flex;
            flex-direction: column;
            color: #333333;
            margin-bottom: 12rpx;
            & > view {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .pro-label {
                color: #999999;
            }
            .pro-total {
                color: #333333;
                .pro-big {
                    font-weight: 700;
                    color: #333333;
                    font-size: $font-size-30;
                }
            }
        }
        .pro-spec:last-child {
            margin-bottom: 0;
        }
    }

    .item {
        padding: $app-page-padding $app-page-padding 0;
    }
    .bottom {
        padding-left: $app-page-padding;
        display: flex;
        flex-direction: row;
        border-top: solid 1rpx $uni-bg-color-grey;
        align-items: center;
        .num {
            display: flex;
            flex: 1;
            align-items: center;
        }
    }
    .order-detail-item {
        display: flex;
        flex-direction: row;
        margin-bottom: 30rpx;
        .product-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: $border-radius-10;
            margin-right: 15rpx;
        }
        .product-info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .product-name {
                font-weight: 500;
                font-size: $font-size-26;
                color: $app-color-text-mian;
                margin-bottom: 6rpx;
            }
            .product-desc {
                font-size: $font-size-20;
                color: $app-color-text-tip;
                margin-bottom: 20rpx;
            }
            .product-bottom {
                display: flex;
                flex-direction: row;
                .product-price {
                    font-size: $font-size-28;
                    color: $app-color-main;
                    margin-right: 10rpx;
                }
                .product-name {
                    product-num: $font-size-24;
                    color: $color-black;
                }
            }
        }
    }
    .bottom-bar {
        justify-content: space-between;
        z-index: 2;
        & > view {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .price {
            font-size: $font-size-30;
            font-weight: 500;
            color: #ec612a;
        }
        .btn {
            width: 220rpx;
            padding: 0;
        }
        .text {
            padding-left: 10rpx;
        }
    }
}
</style>
